<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片变透明</title>
</head>
<body>




<div id="contentId">
    <input type="file" id="upFile" name="test" accept="image/gif, image/jpeg, image/png, image/jpg"><br>
    <label for="colorId">颜色</label><input type="color" id="colorId" style="width: 30px;height: 20px"><br>
    <label for="transparentId">透明度(0-255,0为完全透明，255为不透明，默认255)</label><input type="text" id="transparentId"><br>
	<label for="okId">模糊度</label><input type="text" id="okId"><br>
    <canvas id="myCanvas" style="background-color: #fff;display: none"></canvas>
</div>

<script>
    let colorDom = document.getElementById("colorId");
    let transparentDom = document.getElementById("transparentId");
	let okDom = document.getElementById("okId");
    let content = document.getElementById("contentId");
    let upFile = document.getElementById("upFile");
    upFile.oninput = function () {
        let c = document.getElementById("myCanvas");
        let fr = new FileReader();
        fr.readAsDataURL(upFile.files[0]);
        fr.onload = function () {
            if (c.getContext) {
                let img = document.createElement("img");
                img.src = this.result;
                img.onload = function () {
                    c.width = img.width;
                    c.height = img.height;
                    c.style.display = "block";
                    let ctx = c.getContext("2d");
                    ctx.drawImage(img, 0, 0);
                    let use = [];
                    c.onclick = function (e) {
                        for (let i = 0; i < img.width; i++) {
                            use[i] = [];
                            for (let j = 0; j < img.height; j++) {
                                use[i][j] = 0;
                            }
                        }
                        let imageD = ctx.getImageData(0, 0, img.width, img.height);
                        let pData = imageD.data;
                        let x = e.pageX - c.offsetLeft;
                        let y = e.pageY - c.offsetTop;
                        if (y < 0) {
                            y = 0;
                        }
                        let oldColor = ctx.getImageData(x, y, 1, 1).data;
						console.log(oldColor);
                        let newColor = getColor(colorDom);
                        let tp = parseInt(transparentDom.value || 255);
						let ok = parseInt(okId.value || 0);
                        let zhanX = [];
                        let zhanY = [];
                        let i = 0;
                        let d;
                        zhanX[i] = x;
                        zhanY[i] = y;
                        while (i !== -1) {
                            x = zhanX[i];
                            y = zhanY[i];
                            i--;
                            if (use[x][y] === 0) {
                                use[x][y] = 1;
                                d = y * img.width + x;
                                d = d + d + d + d;
                                if (pData[d] <= oldColor[0] + ok &&  pData[d] >= oldColor[0] - ok
								|| pData[d + 1] <= oldColor[1] + ok &&  pData[d + 1] >= oldColor[1] - ok
								|| pData[d + 2] <= oldColor[2] + ok &&  pData[d + 2] >= oldColor[2] - ok) {
                                    pData[d] = newColor[0];
                                    pData[d + 1] = newColor[1];
                                    pData[d + 2] = newColor[2];
                                    pData[d + 3] = tp;
                                    i++;
                                    zhanX[i] = x <= 0 ? x : x - 1;
                                    zhanY[i] = y;
                                    i++;
                                    zhanX[i] = x;
                                    zhanY[i] = y <= 0 ? y : y - 1;
                                    i++;
                                    zhanX[i] = x < img.width - 1 ? x + 1 : x;
                                    zhanY[i] = y;
                                    i++;
                                    zhanX[i] = x;
                                    zhanY[i] = y < img.height - 1 ? y + 1 : y;
                                }
                            }
                        }
                        ctx.putImageData(imageD, 0, 0);
                    }
                }

            }
        }
    };
    function getColor (colorDom) {
        let colorStr = colorDom.value;
        let color = [0, 0, 0, 1];
        color[0] = parseInt(colorStr.substring(1, 3), 16);
        color[1] = parseInt(colorStr.substring(3, 5), 16);
        color[2] = parseInt(colorStr.substring(5, 7), 16);
        return color;
    }


</script>





</body>
</html>